<template>
  <div class="finish container">
    <template>
      <el-card class="box-card">
        <div class="clearfix">
          <span style="font-size:22px;">完成测试</span>
        </div>
      </el-card>
      <!-- 内容区域 -->
      <el-table
        :data="testanswer.filter(data => !search || data.headtitle.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%"
      >
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="电话" prop="phonenum"></el-table-column>
        <el-table-column label="标题" prop="headtitle"></el-table-column>
        <el-table-column
          label="提交时间"
        >
        <template slot-scope="scope">
            {{scope.row.created_at | dateFrm}}
          </template>
        </el-table-column>
        <!-- {{created_at | dateFrm}} -->
        <el-table-column align="right">
          <template slot="header" slot-scope="scope">
            <el-input
            :key="scope.$index"
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleLook(scope.$index, scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
import { asyncselecttestanswer,asyncselectteachertextitembank } from "../../../plugins/api";
import moment from "moment";
export default {
  name: "finish",
  data() {
    return {
      testanswer: [],
      search: "",
      textitembank:[]
    };
  },
  methods: {
    handleLook(index, row) {
      console.log(index,row)
      // this.$router.push("./finishin/" + row.teachertextitembankid);
      this.$router.push({path:"./finishin/" + row.teachertextitembankid,query:{row:row}})
    }
  },
  async created() {
    this.testanswer = await asyncselecttestanswer();
    // console.log(this.testanswer)
    this.textitembank = await asyncselectteachertextitembank();
    for(let i=0;i<this.testanswer.length;i++){
      for(let j=0;j<this.textitembank.length;j++){
        if(this.testanswer[i].teachertextitembankid==this.textitembank[j].ID){
          this.testanswer[i].headtitle=this.textitembank[j].name
        }
      }
    }
  },
  filters: {
    dateFrm: function(el) {
      return moment(el).format("YYYY-MM-DD HH:mm");
    }
  }
};
</script>

<style scoped>
.box-card {
  margin: 12px 0;
}
</style>
